<template>
  <el-tooltip v-if="showTooltip && $attrs.title" :content="$attrs.title" placement="top">
    <el-button v-if="show" v-bind="$attrs" v-on="$listeners">
      <slot></slot>
    </el-button>
  </el-tooltip>

  <el-button v-else-if="show" v-bind="$attrs" v-on="$listeners">
    <slot></slot>
  </el-button>
</template>
<script>
export default {
  name: "EvButton",
  props: {
    power: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      show: true,
    };
  },
  computed: {
    showTooltip() {
      return this.$attrs.showTooltip !== undefined ? this.$attrs.showTooltip : this.$slots.default === undefined;
    },
  },
  created() {
    if (typeof this.power != undefined && this.power != "") {
      // 权限控制
      let items = this.$server().items();
      if (typeof items === "undefined" || items == "") return;
      items = "," + items + ",";

      if (items.indexOf(this.power) != -1) {
        this.show = true;
      } else {
        this.show = false;
      }
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep.el-button [class*="el-icon-"] + span {
  margin-left: 8px;
}

/**主要按钮 primary + plain*/
::v-deep .el-button--primary {
  .el-button--primary:focus {
    background: #3255e5;
    border-color: #3255e5;
  }
  .is-disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
  .is-plain {
    background: #ffffff;
  }
}
/**次要按钮 primary + plain*/
.el-button--primary.is-plain {
  background: #ffffff;
  border-color: #436de5;
  color: #436de5;
}
.el-button--primary.is-plain.is-disabled {
  background: #ffffff;
  border-color: #436de5;
  color: #436de5;
  opacity: 0.7;
}
.el-button--primary.is-plain.is-disabled:hover {
  cursor: not-allowed;
  background: #ffffff;
  border-color: #436de5;
  color: #436de5;
}
.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
  background: #eef6ff;
  border-color: #436de5;
  color: #436de5;
}
.el-button--primary.is-plain:active {
  background: #3255e5;
  border-color: #3255e5;
  color: #ffffff;
}
/**危险按钮 || 不常点击的按钮 info*/
.el-button--info {
  background: #ffffff;
  border-color: #646e84;
  color: #646e84;
}
.el-button--info.is-disabled {
  background: #ffffff;
  border-color: #646e84;
  color: #646e84;
  opacity: 0.7;
}
.el-button--info.is-disabled:hover {
  background: #ffffff;
  border-color: #646e84;
  color: #646e84;
  cursor: not-allowed;
}
.el-button--info:hover,
.el-button--info:focus {
  background: #eff0f2;
  border-color: #646e84;
  color: #646e84;
}
.el-button--info:active {
  background: #646e84;
  border-color: #646e84;
  color: #ffffff;
}
</style>
